<template>
  <div class="myEcharts">
    <div ref="pieChart" class="pie"></div>
    <div ref="barGraph" class="bar"></div>
  </div>
</template>

<script>
// 1. 引入echarts
import * as echarts from 'echarts';

export default {
  name: 'EchartsView',
  data() {
    return {
      pieList: [],
      title: [],
      views: [],
      count: [],
    };
  },
  mounted() {
    this.pieChart();
    this.barChart();
  },
  methods: {
    pieChart() {
      let pieEcharts = echarts.init(this.$refs.pieChart);
      // 发送请求
      this.$http.get('/pieChart').then((res) => {
        console.log(res.result);
        this._data.pieList = res.result;
        // 设置参数
        pieEcharts.setOption({
          title: {
            text: '文章类别分布图',
            subtext: '显示各个分类的文章数',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: this._data.pieList,
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              name: 'Radius Mode',
              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'radius',
              itemStyle: {
                borderRadius: 5,
              },
              label: {
                show: true,
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
              data: this._data.pieList,
            },
          ],
        });
      });
    },
    barChart() {
      let barEcharts = echarts.init(this.$refs.barGraph);
      this.$http.get('/barChart').then((res) => {
        var arr = res.result;
        for (var i = 0; i < arr.length; i++) {
          if (typeof arr[i] == 'object') {
            this._data.title.push(arr[i].article_title);
            this._data.views.push(arr[i].article_views);
            this._data.count.push(arr[i].count);
          }
        }
        barEcharts.setOption({
          title: {
            text: '文章数据详情图',
            subtext: '显示各个文章下的浏览量和评论数',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['评论量', '浏览量'],
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              // prettier-ignore
              data: this._data.title,
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: 'Rainfall',
              type: 'bar',
              data: this._data.views,
              markLine: {
                data: [{ type: 'average', name: 'Avg' }],
              },
            },
            {
              name: 'Evaporation',
              type: 'bar',
              data: this._data.count,
              markLine: {
                data: [{ type: 'average', name: 'Avg' }],
              },
            },
          ],
        });
      });
    },
  },
};
</script>

<style>
.pie {
  width: 800px;
  height: 800px;
}
.bar {
  width: 800px;
  height: 800px;
}
.myEcharts {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>
